<template>
  <div>
    <a-card :bordered="false" :bodyStyle="{ padding: '3px 3px 3px 3px', margin: '3px 0px 0px 0px'}" >
      <a-list
        itemLayout="horizontal"
        :dataSource="userinfodata"
      >
        <a-list-item slot="renderItem" slot-scope="item, index" :key="index" :style="{ padding: '0px', margin: '0px'}">
          <a-list-item-meta>
            <userinfo slot="title" :bodyStyle="{ padding: '0px', margin: '0px'}">  </userinfo>
          </a-list-item-meta>
          <template >
            <a slot="actions" @click=""><a-icon type="right" /></a>
          </template>

        </a-list-item>
      </a-list>
    </a-card>

    <a-card :bordered="false" :bodyStyle="{ padding: '3px 3px 3px 10px', margin: '3px 0px 0px 0px'}" >
      <a-list
        itemLayout="horizontal"
        :dataSource="data"
      >
        <a-list-item @click="item.actions.callback" slot="renderItem" slot-scope="item, index" :key="index">
          <a-list-item-meta>
            <a slot="title">{{ item.title }}</a>
            <a-icon slot="avatar" :type="item.icon" :style="{ fontSize: '18px', color: item.color }"/>
<!--            <span slot="description">-->
<!--              <span class="security-list-description">{{ item.description }}</span>-->
<!--              <span v-if="item.value"> : </span>-->
<!--              <span class="security-list-value">{{ item.value }}</span>-->
<!--            </span>-->
          </a-list-item-meta>
          <template v-if="item.actions">
            <a slot="actions" >{{ item.actions.title }}<a-icon type="right" /></a>
          </template>

        </a-list-item>
      </a-list>
    </a-card>

    <a-card :bordered="false" :bodyStyle="{ padding: '3px 3px 3px 3px', margin: '3px 0px 0px 0px'}" >
      <a-button type="danger" icon="logout" block @click="handleLogout()">退出登录</a-button>
    </a-card>

    <login-modal ref="showLoginModal" @ok="changeUserRole" @close="onClose"></login-modal>
  </div>

</template>

<script>
  import Vue from 'vue'
  import { mapActions, mapGetters, mapState } from 'vuex'
  import Userinfo from '@lone/lone-vue/src/views/dashboard/portlet/userInfo'
  import { CURRENT_ROLE_NAME,CURRENT_DEPART_NAME,CURRENT_DEPART, USER_NAME,USER_INFO,CURRENT_ROLE } from "@/store/mutation-types"
  import { getAction} from '@lone/lone-vue/src/api/manage'
  import LoginModal from './modules/LoginModal'

  export default {
    name: "myboxs",
    components: { LoginModal, Userinfo, },
    data () {
      return {
        userinfodata: [
          { title: '用户信息'  },
        ],
        data: [
          { title: '账户密码' , description: '', icon: 'lock', color:'red', actions: { title: '', callback: () => { this.handleChangePassword(); } } },
          { title: '切换角色' , description: '', icon: 'user', color:'blue', actions: { title: '', callback: () => { this.updateCurrentRole(); } } },
        ]
      }
    },
    methods: {
      ...mapActions(["Logout"]),

      handleChangePassword(){
        let username = Vue.ls.get(USER_NAME);
        let userinfo = Vue.ls.get(USER_INFO);
        this.$refs.showChangePasswordModal.showChangePassword(username,userinfo);
      },
      updateCurrentRole(){
        let userInfo = Vue.ls.get(USER_INFO);
        getAction('/sys/user/queryUserRoleByUserId',{userId:userInfo.id}).then((res)=>{
          if(res.success){
            if(res.result.length===1){
              this.$message.warning("您当前只有一个角色，暂时不能切换!")
            }else{
              this.$refs.showLoginModal.showUserRole(res.result);
            }
          }else{
          }
        });
      },
      changeUserRole(userDepartRoleVo){
        Vue.ls.set(CURRENT_ROLE,userDepartRoleVo.roleId)
        Vue.ls.set(CURRENT_DEPART,userDepartRoleVo.departId)
        Vue.ls.set(CURRENT_DEPART_NAME,userDepartRoleVo.departName)
        Vue.ls.set(CURRENT_ROLE_NAME,userDepartRoleVo.roleName)
        this.$router.go({ name: "account-myboxs" });

      },
      onClose(){

      },
      handleLogout() {
        const that = this

        this.$confirm({
          title: '提示',
          content: '真的要注销登录吗 ?',
          onOk() {
            return that.Logout({}).then(() => {
              if (window._CONFIG['LoneDevice'] == 'mobile') {
                that.$router.push({ name: 'user-login'})
              } else {
                window.location.href="/";
              }

              //window.location.reload()
            }).catch(err => {
              that.$message.error({
                title: '错误',
                description: err.message
              })
            })
          },
          onCancel() {
          },
        });
      },
    }
  }
</script>

<style scoped>

</style>